<template>
    <div class="register-container">
        <h2>用户注册</h2>
        <form @submit.prevent="handleSubmit">
            <div class="form-group">
                <label for="account">账号</label>
                <input
                        type="text"
                        id="account"
                        v-model="user.account"
                        required
                        placeholder="请输入您的账号"
                />
            </div>

            <div class="form-group">
                <label for="username">姓名</label>
                <input
                        type="text"
                        id="username"
                        v-model="user.name"
                        required
                        placeholder="请输入您的姓名"
                />
            </div>
            <div class="form-group">
                <label for="phone">联系电话</label>
                <input
                        type="text"
                        id="phone"
                        v-model="user.phone"
                        required
                        placeholder="请输入您的联系电话"
                />
            </div>
            <div class="form-group">
                <label for="idcard">身份证号码</label>
                <input
                        type="text"
                        id="idcard"
                        v-model="user.idcard"
                        required
                        placeholder="请输入您的身份证号码"
                />
            </div>
            <div class="form-group">
                <label for="gender">性别</label>
                <select id="gender" v-model="user.sex" required>
                    <option value="1">男</option>
                    <option value="0">女</option>
                    <!-- 添加其他性别选项，如 'other' 或 'prefer-not-to-say' 等 -->
                </select>
            </div>

            <div class="form-group">
                <label for="birth-date">出生日期</label>
                <input
                        type="date"
                        id="birth-date"
                        v-model="user.birthday"
                        required
                />
            </div>
            <div class="form-group">
                <label for="height">身高</label>
                <input
                        type="text"
                        id="height"
                        v-model="user.height"
                        placeholder="请输入您的身高"
                />
            </div>
            <div class="form-group">
                <label for="weight">体重</label>
                <input
                        type="text"
                        id="weight"
                        v-model="user.weight"
                        placeholder="请输入您的体重"
                />
            </div>
            <div class="form-group">
                <label for="blood">血型</label>
                <input
                        type="text"
                        id="blood"
                        v-model="user.blood"
                        placeholder="请输入您的血型"
                />
            </div>

            <div class="form-group">
                <label for="password">密码</label>
                <input
                        type="password"
                        id="password"
                        v-model="user.password"
                        :class="{ 'is-invalid': passwordError }"
                        required
                        placeholder="请输入您的密码"
                />
                <div class="invalid-feedback" v-if="passwordError">{{ passwordErrorMessage }}</div>
            </div>

            <div class="form-group">
                <label for="confirm-password">确认密码</label>
                <input
                        type="password"
                        id="confirm-password"
                        v-model="confirmPassword"
                        required
                        placeholder="请再次输入密码以确认"
                />
                <div class="invalid-feedback" v-if="passwordsDontMatch">两次输入的密码不一致</div>
            </div>

            <button type="submit"  class="btn btn-primary" @click="register">立即注册</button>
        </form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                user: {
                    account: '',
                    name: '',
                    password: '',
                    sex: '', // 性别字段
                    birthday: '', // 出生日期字段（格式为 YYYY-MM-DD）
                    phone: '', //
                    height: '', //
                    weight: '', //
                    blood: '', //
                },
                confirmPassword: '',
                passwordError: false,
                passwordErrorMessage: '',
            };
        },
        methods: {
            register() {
                console.log("register")
                if (this.user.password !== this.confirmPassword) {
                    this.passwordsDontMatch = true;
                    return;
                }

                // 清除错误提示
                this.passwordError = false;
                this.passwordsDontMatch = false;

                // 这里是调用后端API进行注册逻辑的地方
                this.$axios.post('http://localhost:8090/register', this.user)
                    .then(response => {
                        // 注册成功后的处理，例如跳转到首页或显示成功提示
                        // this.$router.push('/');
                        this.$router.replace('/');
                    })
                    .catch(error => {
                        // 处理错误，比如密码强度不足时设置密码错误信息
                        if (error.response.data && error.response.data.error === 'weak_password') {
                            this.passwordError = true;
                            this.passwordErrorMessage = '密码强度不足，请重新设置';
                        }
                        // 其他错误处理...
                    });
            },
        },
        watch: {
            // 可以添加一个watcher来实时对比密码是否相同
            confirmPassword(newVal) {
                this.passwordsDontMatch = newVal !== this.user.password;
            },
        },
    };
</script>

<style scoped>
    /* 添加样式 */
    .register-container {
        /* 注册表单容器样式 */
    }
    .form-group {
        /* 表单字段组样式 */
    }
    .invalid-feedback {
        /* 错误提示样式 */
    }
</style>